<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue的基础知识</title>
</head>
<body>
  <div id="app">
    <!--文本绑定指令，可以使用{{}}(插值表达式)来完全替换-->
    <span v-text="username"></span>
    <span>{{age}}---{{username}}</span>
    <!--intro不会解析html的代码-->
    {{intro}}
    <!--主要用于文章显示页面-->
    <span v-html="intro"></span>
    <br>
    <!-- 
    由于属性绑定太常用了，在实际的操作中，经常省略v-bind
    <a href="#" v-bind:title="htitle">测试超链接</a> -->
    <a href="#" :title="htitle">测试超链接</a>
    <a href="#" :title="htitle+'[士大夫立刻世界的分厘卡圣诞节发]'">测试超链接</a>
    <br>
    <!--插值表达式中可以执行js的代码-->
    <p>{{a+b}}</p>
    <p>{{arr.join(",")}}</p>
    <p>{{a>b?a:b}}</p>
  </div>
  <script src="vue.js"></script>
  <script>
    const vm  = new Vue({
      el:"#app",
      data:{
        username:"张三",
        age:12,
        intro:"<p>真实的金佛山觉得佛斯杜佛寺的肌肤</p>",
        htitle:"这是一个网页的测试信息",
        a:10,
        b:20,
        arr:[1,2,3,4]
      }
    })
  </script>
</body>
</html>